<template>
    <div class="nav">
		<div class="nav-head">
			<div class="app">
				<img class="appAvatar" :src="this.$store.state.user.appAvatar" alt="">
			</div>
			<div class="userCon">
				<el-dropdown @command="clickDropdown">
					<span class="el-dropdown-link">
						<div class="user">
							<img class="avatar" :src="this.$store.state.user.avatar" alt="">
							<div class="name">{{this.$store.state.user.name}}</div>
						</div>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
		<div class="list">
			<vue-scroll :ops="ops">
				<div v-if="show(item.role)" class="con" v-for="(item,index) in this.$store.state.navigationList" :key="index + 'super'">
					<!--  -->
					<div class="item super" @click="clickSuper(item,index)" :class="{actSuper : $route.meta.nav == item.nav}">
						<i class="icon" :class="item.icon"></i>
						<span style="margin-left:8px;">{{item.text}}</span>
						<div class="unfold" v-if="item.child && item.child.length > 0">
							<i v-if="item.open" class="el-icon-arrow-up"></i>
							<i v-else class="el-icon-arrow-down"></i>	
						</div>
					</div>
					<!-- 子菜单 -->
					<div v-if="item.open && show(childItem.role)" class="item child" v-for="(childItem,childIndex) in item.child" :key="childIndex + 'child'" @click="clickChild(childItem,childIndex)" :class="{actChild : $route.meta.navChild == childItem.nav}">
						<span>{{childItem.text}}</span>
					</div>
				</div>
			</vue-scroll>
		</div>
    </div>
</template>
<script>

	export default {
		data() {
			return {
				ops: {
					vuescroll: {
					mode: "native"
					},
					sizeStrategy:"number",
					scrollPanel: {
					// 是否允许x或y方向上的滚动
					scrollingX: false,
					scrollingY: true,
					},
					scrollContent: {},
					vRail: {}
				},

			}
		},
		methods: {
			// 判断是否显示
			show(role){
				// 如果不需要权限
				if(!role || role.length == 0){
					return true
				}
				// 如果需要权限  则判断有没有所需的权限
				if(this.isContained(this.$store.state.user.roles,role)){
					return true;
				}else{
					return false;
				}
			},
			// 判断b数组是否包含在a数组中
			isContained(a, b){
				if(!(a instanceof Array) || !(b instanceof Array)) return false;
				if(a.length < b.length) return false;
				var aStr = a.toString();
				for(var i = 0, len = b.length; i < len; i++){
				if(aStr.indexOf(b[i]) == -1) return false;
				}
				return true;
			},
			clickSuper(item,index){
				// 判断有没有子菜单  有 则展开
				if(item.child && item.child.length > 0){
					let obj = this.$store.state.navigationList[index]
					obj.open = !obj.open
					this.$set(this.$store.state.navigationList, index, obj);
				}
				// 
				if(item.router){
					this.$router.replace(item.router)
				}
			},
			clickChild(item){
				if(!item.router){
					return
				}
				this.$router.replace(item.router)
			},
			clickDropdown(e){
				this[e]()
			},
			logout(){
				// 清除本地
				this.$reqPost("/api/logout",{

                }).then(res => {
					this.$message({
                        message: '您已退出登录',
                    });

					localStorage.removeItem('sessionId');
					
					location.reload()
                },err=>{

                })
			}
		},
		mounted() {

		},
    }
</script>

<style lang="scss" scoped>
	.nav{

	}
	.nav-head{
		height: 50px;
		width: 100vw;
		position: absolute;
		top: 0;
		background: #000;
		z-index: 99;
	}
	.list{
		color: #cacaca;
		width: 190px;
		height: 100vh;;
		position: absolute;
		left: 0;
		background: #313a4e;
		padding-top: 50px;
		.con{
			.item{
				width: 100%;
				height: 50px;
				line-height: 50px;
				padding: 0 8px;
				cursor: pointer;
			}
			.super{
				position: relative;
				border-bottom:1px solid #313a4e;
				padding-left: 30px;
				background: #3d4961;
				color: #b0b3bb;
				.icon{
					font-size: 16px;
				}
				.unfold{
					position: absolute;
					font-size: 20px;
					right: 8px;
					top: 0;
				}
			}
			.super:hover{
				color: #1ba8ed;
			}
			.actSuper{
				background: #e6eaf2;
				color: #1a1a1a;
			}
			.actSuper:hover{
				background: #e6eaf2;
				color: #1a1a1a;
			}

			.child{
				padding-left: 58px;
				background: #313a4e;
				color: #8d8e93;
			}
			.child:hover{
				color: #1ba8ed;
			}
			.actChild{
				color: #fff;
				background: #2B3345;
			}
			.actChild:hover{
				color: #fff;
			}
		}
	}


	.app{
		position: absolute;
		top: 0;
		left: 0;
		.appAvatar{
			width: 40px;
			height: 40px;;
			margin-top: 5px;
			margin-left: 12px;
		}
	}

	.userCon{
		position: absolute;
		right:8px;
		top: 0;
	}
	.user{
		height: 50px;
		line-height: 50px;
		overflow: hidden;
		text-align: center;
		overflow: hidden;
		cursor: pointer;
		.avatar{
			width: 35px;
			height: 35px;
			float: left;
			margin: 7.5px 5px 0;
			border-radius: 50%;
		}
		.name{
			height: 50px;
			color: #cacaca;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding: 0 5px;
			float: left;
		}
	}
</style>
